<template>
  <div id="pickGoods">
    <x-header :left-options="{backText: ''}" class="vux-1px-b">提货</x-header>
    <div class="head_title">
      <ul>
        <li><h2>可使用商品:<i>5单</i></h2></li>
        <li class="text-right"><span>提货列表</span></li>
      </ul>
    </div>
    <div class="pick_list">
      <ul>
        <li v-for="(item, index) in 4" :key="index" @click="$router.push({path: '/pickGoodsDetails'})">
          <div class="pick_list_img"><img src="" alt=""></div>
          <div class="pick_list_bottom">
            <div>思考地方撒地方两三点思考地方撒方两三点思地方撒地两三点思地方撒地方点思考地地方两三点</div>
            <span>兑换比例<i>1:3</i></span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'pickGoods'
}
</script>

<style lang="less" scoped="scoped">
#pickGoods{
  .head_title{
    width: 100%;
    padding: .2rem 0;
    ul{
      display: flex;
      justify-content: space-around;
      flex-wrap: nowrap;
      background: rgba(255,255,255,1);
      padding: 0 .4rem;
      li{
        width: 50%;
        height: .8875rem;
        line-height: .8875rem;
        h2{
          font-size: .3rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(0,0,0,1);
          i{
            color: #FFCC00;
          }
        }
        span{
          font-size: .3rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(102,102,102,1);
        }
      }
    }
  }
  .pick_list{
    ul{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li{
        width: 49%;
        background:rgba(255,255,255,1);
        padding: .3rem;
        margin-bottom: .2rem;
        div.pick_list_img{
          text-align: center;
          padding-bottom: .3rem;
          img{
            width: 2.375rem;
            height: 2.375rem;
          }
        }
        div.pick_list_bottom{
          div{
            font-size: .225rem;
            font-family: 'Source Han Sans SC';
            font-weight: 400;
            color: rgba(51,51,51,1);
            line-height: .4375rem;
            padding-bottom: .3rem;
            overflow: hidden;
            display: -webkit-box;
            -webki-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
          span{
            font-size: .225rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: rgba(0,0,0,1);
            line-height: .4375rem;
            i{
              color: #FF0036;
              padding-left: .2rem;
            }
          }
        }
      }
    }
  }
}
.text-left{
  text-align: left;
}
.text-right{
  text-align: right;
}
</style>
